"use client"
import React, { useEffect } from 'react';
import type { FormProps } from 'antd';
import { Button, Select, Form, Input, InputNumber, DatePicker, Space } from 'antd';
import * as asyncfn from '../store/index';
import dayjs from 'dayjs';
import { useDispatch } from 'react-redux';

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};



export default function App(props:any){
  const dispatch = useDispatch();

  const [form] = Form.useForm();
  const onFinish = (values:any) => {
    if(props.title=='添加'){
      values.price=values.price*1
      values.key=new Date(values.key.$d).getTime();
      dispatch(asyncfn.r_postShangJi(values) as any) 
    }else if(props.title=='删除'){
      dispatch(asyncfn.r_DeleteShangJi(props.data.id) as any)
    }else{
      values.price=values.price*1
      values.key=new Date(values.key.$d).getTime();
      dispatch(asyncfn.r_patchShangJi({...props.data,...values}) as any)
    }
    props.handleCancel()
  };
  
  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  useEffect(() => {
    // 组件挂载时执行的逻辑
    props.title=='修改'&&form.setFieldsValue({...props.data,key:dayjs(props.data.key)})
    return () => {
      // 组件卸载时执行的逻辑
    };
  }, []);
  return (
    <Form
      form={form}
      clearOnDestroy={true}
      name="basic"
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      {/* 商机标题 */}
      {props.title!="删除"?<Form.Item
        label="商机标题"
        name="title"
        rules={[{ required: true, message: '请输入商机标题!' }]}
      >
        <Input />
      </Form.Item>:null}
      {/* 关联客户 */}
      {props.title!="删除"?<Form.Item
        label="关联客户"
        name="Associated_customer"
        rules={[{ required: true, message: '请选择关联客户!' }]}
      >
        <Select
            placeholder=""
            allowClear
          >
          <Select.Option value="深圳市亿恩科技有限公司">深圳市亿恩科技有限公司</Select.Option>
          <Select.Option value="深圳市万恩科技有限公司">深圳市万恩科技有限公司</Select.Option>
          <Select.Option value="深圳市益达食品有限公司">深圳市益达食品有限公司</Select.Option>
        </Select>
      </Form.Item>:null}
      {/* 商机阶段 */}
      {props.title!="删除"?<Form.Item
        label="商机阶段"
        name="stage"
        rules={[{ required: true, message: '请选择商机阶段!' }]}
      >
        <Select
            placeholder=""
            allowClear
          >
          <Select.Option value="初步洽谈1">初步洽谈1</Select.Option>
          <Select.Option value="初步洽谈2">初步洽谈2</Select.Option>
          <Select.Option value="初步洽谈3">初步洽谈3</Select.Option>
        </Select>
      </Form.Item>:null}
      {/* 报价记录 */}
      {props.title!="删除"?<Form.Item
        label="报价记录"
        name="records"
        rules={[{ required: true, message: '请输入报价记录!' }]}
      >
        <InputNumber min={1}/>
      </Form.Item>:null}
      {/* 报价总金额 */}
      {props.title!="删除"?<Form.Item
        label="报价总金额"
        name="price"
        rules={[{ required: true, message: '金额不能为空!' }]}
      >
        <Input />
      </Form.Item>:null}
      {/* 最后跟进时间 */}
      {props.title!="删除"?<Form.Item
        label="最后跟进时间"
        name="key"
        rules={[{ required: true, message: '本项为必选项!' }]}
      >
        <DatePicker format={{ format: 'YYYY-MM-DD',type: 'mask'}} 
          placeholder='请选择最后跟进时间' />
      </Form.Item>:null}
      {/* 提示 */}
      {props.title=="删除"?<Form.Item label={null}>
        <span>确定要删除id为: {props.data.id} 的这条数据吗？</span>
      </Form.Item>:null}
      {/* 操作按钮 */}
      <Form.Item label={null}>
        <Space>
          <Button type="primary" htmlType="submit">
          {props.title=="删除"?"确认":"提交"}
          </Button>
          <Button type="primary" htmlType="reset" onClick={props.handleCancel}>
            取消
          </Button>
        </Space>
      </Form.Item>
    </Form>
  )
}